<template>
  <div class="service">
    
    <div class="newcharge">
    <div class="charge-title"> 
      <i class="el-icon-arrow-left" @click=toPage()></i>
      <span class=jiaofei-text> 新增缴费 </span>
    <div class="charge-info">
      <div class="charge-kind">
         <i :style="{color:chargekindcolor}"  :class=chargekindclass  id="i"></i>
        <span class="span">{{chargekind}}</span>
      </div>
      <div class="city">
         <el-dropdown  trigger="click" @command="handleCommand">
        <span class="el-dropdown-link">
        {{city}}
        <i class="el-icon-arrow-down el-icon--right"></i>
        </span>
        <el-dropdown-menu slot="dropdown">
        <el-dropdown-item v-for="(item,index) in citylist" :key="index" v-text="item" :command="item"></el-dropdown-item>
        </el-dropdown-menu>
        </el-dropdown>
      </div>
    </div>
    </div>
    <div class="charge-card">
      <div class="step"> 
         <el-steps direction="vertical" :active="1" class="step">
        <el-step></el-step>
        <el-step ></el-step>
        </el-steps>
      </div>
      <div class="input">
      <div class="danwei-text">缴费单位</div>
      <div class="danwei">
        <el-autocomplete 
      popper-class="my-autocomplete"
      v-model="state"
      :fetch-suggestions="querySearch"
      placeholder="请输入缴费单位"
      @select="handleSelect">
      <i
        class="el-icon-edit el-input__icon"
        slot="suffix"
        @click="handleIconClick">
      </i>
      <template slot-scope="{ item }">
        <div class="name">{{ item.value }}</div>
        <span class="addr">{{ item.address }}</span>
      </template>
      </el-autocomplete>
      </div>
      <div class="zhanghao-text">缴费账户</div>
      <div class="zhanghao">
        <el-input v-model="input" placeholder="请输入缴费账号"></el-input>
      </div>
    </div>
    </div>
  </div>
  </div>
  

</template>

<script>
export default {
  name: 'Chargeinfo',
  data(){
    
    return{
      restaurants: [],
      state: '',
       input: '',
      citylist:["珠海","广州","深圳","佛山","东莞"],
      chargekind:'电费',
      chargekindcolor:"#EFAF3F",
      chargekindclass:"el-icon-message-solid",
      city:"珠海市",
      chargelist:[
            {
              text:"电费",
              class:"el-icon-message-solid",
              color:"#EFAF3F"
              
            },
            {
              text:"水费",
              class:"el-icon-s-ticket",
              color:"#53B06D",
             
            },
            {
              text:"燃气费",
              class:"el-icon-s-cooperation",
              color:"#DC6C44"
            },
            {
              text:"固话费",
              class:"el-icon-phone",
               color:"#EFAF3F"
            },
            {
              text:"宽带费",
              class:"el-icon-s-promotion",
              color:"#4D99CF"
            },
            {
              text:"电视费",
              class:"el-icon-s-platform",
               color:"#53B06D"
            },
            {
              text:"邮卡充值",
              class:"el-icon-s-finance",
               color:"#DC6C44"
            },
            {
              text:"电费",
              class:"el-icon-message-solid",
               color:"#EFAF3F"
            },
            {
              text:"ETC办理",
              class:"el-icon-s-check",
               color:"#57BD6A"
            }
        ]
    }
  },
  methods: {
      handleCommand(command) {
        // this.$message('click on item ' + command);
        this.city=command;
     },
      toPage(text){
       this.selectcharge=text;
       console.log(this.selectcharge);
       this.$router.push({
      path: '/Services'
    })
    },
     querySearch(queryString, cb) {
        var restaurants = this.restaurants;
        var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants;
        // 调用 callback 返回建议列表的数据
        cb(results);
      },
      createFilter(queryString) {
        return (restaurant) => {
          return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
        };
      },
      loadAll() {
        return [
          { "value": "深圳市电费", "address": "长宁区新渔路144号" },
          { "value": "珠海市电费）", "address": "香洲区区淞虹路661号" },
          { "value": "广东省电费", "address": "广东省广州市天河区真北路988号创邑金沙谷6号楼113" },
          { "value": "北京市电费)", "address": "天山西路438号" },
        ];
      },
      handleSelect(item) {
        console.log(item);
      },
      handleIconClick(ev) {
        console.log(ev);
      }
  },
   mounted() {
      this.restaurants = this.loadAll();
       this.chargekind = this.$route.query.selectcharge;
        this.chargelist.forEach((item) => {
         if(item.text==this.chargekind){
           this.chargekindcolor=item.color;
           this.chargekindclass=item.class;
         }
        }
      )
    },
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.span{
  font-size: 16px;
  font-weight: bold;
  margin-top:1px;
}
 .jiaofei-text{
   width:100px;
   margin-left:123px;
 }
  #i{
    font-size: 25px;
    color:#EFAF3F;
    margin-top:12px;
    margin-right:5px;
  }
  .danwei-text{
    font-size:14px;
     height: 20px;
     width:100px;
     margin-top:40px;
     margin-bottom: 20px;
  }
  .zhanghao-text{
    font-size:14px;
    height: 20px;
     width:100px;
    margin-top:20px;
     margin-bottom: 15px;
  }
  .el-autocomplete{
    margin-top:-60px;
  }
  .el-dropdown-link {
    cursor: pointer;
  }
  .el-icon-arrow-down {
    font-size: 12px;
  }
  .el-dropdown{
     font-size:13px;
    /* position: absolute; */
     /* margin-top:60px; */
    /* margin-left:280px; */
  }
  .el-icon-arrow-left{
    font-size:18px;
    margin-top:27px;
    font-weight: bold;
    margin-left:25px;
  }

  .charge-card{
    height:250px;
    width:345px;
     background-color:#dfeeea;;
   
    box-shadow: 1px 1px 5px #a7c4bc;
     border-radius: 10px;
   
    margin-top:20px;
    margin-left:13px;
    display: flex;
  }
  .step
  { 
    padding-top:20px;
    padding-left:10px;
    height: 110px;
   
  }
  .input{
    height:250px;
    width:300px;
    margin-left:15px;
  
  }
  input{
    width:100%;
    
  }
  .zhanghao{
    width:195px;
  }
  .charge-kind{
    width:100px;
    height:50px;
     text-align: center;
  }
  .charge-info{
    display: flex;
    justify-content: space-between ;
  }
  .city{
    width:70px;
    height:20px;
     margin-right: 20px;
     margin-top:17px;
  }
 
</style>
